<template>
  <div class="dashboard">
    <el-card class="welcome-card">
      <h2>欢迎回来，管理员！🎉</h2>
      <p>这是您的会员管理系统控制面板</p>
    </el-card>

    <el-row :gutter="20" class="stats-row">
      <el-col :span="6">
        <el-card class="stat-card">
          <div>成员总数</div>
          <h3>{{ stats.members }}</h3>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div>测试场次</div>
          <h3>{{ stats.tests }}</h3>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div>录入成绩数</div>
          <h3>{{ stats.scores }}</h3>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div>平均分</div>
          <h3>{{ stats.averageScore }}</h3>
        </el-card>
      </el-col>
    </el-row>

    <el-card class="section">
      <h3>📋 最近测试成绩</h3>
      <el-table :data="recentScores" style="width: 100%">
        <el-table-column label="成员" prop="member" />
        <el-table-column label="测试名称" prop="test_name" />
        <el-table-column label="分数" prop="score" />
        <el-table-column label="录入时间" prop="created_at" />
      </el-table>
    </el-card>

    <el-card class="section">
      <h3>⚡ 快捷操作</h3>
      <el-button type="primary" @click="$router.push('/member/add')">添加成员</el-button>
      <el-button type="success" @click="$router.push('/score/add')">录入成绩</el-button>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const stats = ref({
  members: 48,
  tests: 5,
  scores: 120,
  averageScore: 84.5
})

const recentScores = ref([])

onMounted(() => {
  // 模拟最近测试数据（实际应从后端获取）
  recentScores.value = [
    { member: '张三', test_name: '2025年春季测试', score: 88.5, created_at: '2025-07-18' },
    { member: '李四', test_name: '2025年春季测试', score: 92.0, created_at: '2025-07-18' },
  ]
})
</script>

<style scoped>
.dashboard {
  padding: 20px;
}
.stats-row {
  margin: 20px 0;
}
.stat-card {
  text-align: center;
  font-size: 18px;
}
.section {
  margin-top: 20px;
}
</style>

<script>
export default {
  name: 'DashboardView'
}
</script>